<script setup lang="ts">
import { GetUserSettingAPI, UpdateUserSettingAPI } from '@/services/detail'
import { GetVersionAPI, SearchFileOneAPI } from '@/services/img'
import { postLoginAPI } from '@/services/login'
import { ZiChanIndexAPI } from '@/services/zichan'
import { useMemberStore } from '@/stores'
import type { UserSetting } from '@/types/detail'
import type { ZiChanIndexData } from '@/types/zichan'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 获取会员信息
const pwd = ref('')
const version = ref('')
const memberStore = useMemberStore()
const data = ref<ZiChanIndexData>()
const showMask = ref(false)
const userSetting = ref<UserSetting>()
const backgroundImgMain = ref('')
const opacity = ref(0.7)
//计算属性
const maskednetAssets = computed(() => {
  if (showMask.value) {
    const amountStr = data.value?.netAssets.toString() || ''
    const maskedStr = '*'.repeat(amountStr.length)
    return maskedStr
  } else {
    return data.value?.netAssets
  }
})
const maskednetInCome = computed(() => {
  if (showMask.value) {
    const amountStr = data.value?.InCome.toString() || ''
    const maskedStr = '*'.repeat(amountStr.length)
    return maskedStr
  } else {
    return data.value?.InCome
  }
})
const maskedtotal = computed(() => {
  if (showMask.value) {
    const amountStr = data.value?.total.toString() || ''
    const maskedStr = '*'.repeat(amountStr.length)
    return maskedStr
  } else {
    return data.value?.total
  }
})
const maskedfuZhai = computed(() => {
  if (showMask.value) {
    const amountStr = data.value?.StockPercent.toString() || ''
    const maskedStr = '*'.repeat(amountStr.length)
    return maskedStr
  } else {
    return data.value?.StockPercent
  }
})
onShow(async () => {
  // const res1 = await GetVersionAPI({
  //   Auth: '',
  // })
  // if (version.value != res1.result.Version) {
  //   window.location.reload()
  // }
  showMask.value = true
  onRefresherrefresh()
  //个性主题
  if (memberStore.profile) {
    const detail = await SearchFileOneAPI({
      ImgType: 'zichan',
      UserName: memberStore.profile.UserName,
      ID: 0,
    })
    if (detail.result) {
      backgroundImgMain.value = detail.result.ImgUrl
    }
    const setting = await GetUserSettingAPI({
      UserName: memberStore.profile.UserName,
    })
    opacity.value = setting.result.ZichanOpacit / 10
  }
})
//加载初始化
onLoad(async () => {
  const res1 = await GetVersionAPI({
    Auth: '',
    UserGroup: '',
  })
  version.value = res1.result.Version
  if (memberStore.profile) {
    await InitUserSetting()
    showMask.value = true //userSetting.value?.IsAmount!
    const res = await ZiChanIndexAPI({
      UserGroup: memberStore.profile.UserGroup,
      Auth: memberStore.profile.Token,
    })
    data.value = res.result
    uni.showToast({ icon: 'success', title: '刷新成功' })
  }
})
//金额隐藏事件
const toggleMask = () => {
  // userSetting.value!.IsAmount = !showMask.value
  // UpdateUserSetting()
  showMask.value = !showMask.value
}
//初始化用户配置
const InitUserSetting = async () => {
  if (memberStore.profile) {
    const res = await GetUserSettingAPI({ UserName: memberStore.profile.UserName })
    userSetting.value = res.result
  }
}
//修改用户配置
const UpdateUserSetting = async () => {
  // if (memberStore.profile) {
  //   await UpdateUserSettingAPI(userSetting.value!)
  // }
}
// 是否触发下拉刷新
const isTriggered = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开始动画
  isTriggered.value = true
  // 加载数据
  if (memberStore.profile) {
    const res = await ZiChanIndexAPI({
      UserGroup: memberStore.profile.UserGroup,
      Auth: memberStore.profile.Token,
    })
    data.value = res.result
    uni.showToast({ icon: 'success', title: '刷新成功' })
  }
  // 关闭动画
  isTriggered.value = false
}
//弹出层
// uni-ui 弹出层组件
//打开
const OpenPwdDialog = async () => {
  if (memberStore.profile && showMask.value) {
    popup.value?.open()
  } else {
    showMask.value = true
  }
}
const popup = ref<{
  open: (type?: UniHelper.UniPopupType) => void
  close: () => void
}>()
const ComfirmPwd = async () => {
  if (memberStore.profile && showMask.value) {
    const res = await postLoginAPI({
      UserName: memberStore.profile.UserName,
      Pwd: pwd.value,
    })
    pwd.value = ''
    showMask.value = false
    popup.value?.close()
  }
}
const Add = () => {
  uni.navigateTo({ url: '/pages/card/cardEdit' })
}
</script>
<template>
  <scroll-view
    enable-back-to-top
    scroll-y
    refresher-enabled
    :refresher-triggered="isTriggered"
    @refresherrefresh="onRefresherrefresh"
  >
    <view class="viewport">
      <view class="header" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
        <uni-title type="h1" align="center" title="资产" class="text"></uni-title>
        <text class="btn" @tap="Add()">新增</text>
      </view>
      <scroll-view enable-back-to-top scroll-y class="scroll">
        <view class="count">
          <view
            class="count1"
            :style="`background: url('${backgroundImgMain}')  no-repeat center / cover;opacity: ${opacity}`"
          ></view>
          <view class="bottom">
            <view>
              <uni-title type="h4" align="left" title="净资产" class="label"></uni-title>
              <uni-title
                @tap="OpenPwdDialog()"
                type="h1"
                align="left"
                :title="maskednetAssets"
                class="text"
              ></uni-title>
            </view>
            <view class="group">
              <uni-title type="h4" align="left" title="投资收益"></uni-title>
              <uni-title
                @tap="OpenPwdDialog()"
                type="h4"
                align="left"
                :title="maskednetInCome"
                class="text"
              ></uni-title>
            </view>
          </view>
          <view class="bottom">
            <view>
              <uni-title type="h4" align="left" title="净资产(剔除股票收益)"></uni-title>
              <uni-title
                @tap="OpenPwdDialog()"
                type="h4"
                align="left"
                :title="maskedtotal"
                class="text"
              ></uni-title>
            </view>
            <view class="group">
              <uni-title type="h4" align="left" title="股票占比"></uni-title>

              <uni-title
                @tap="OpenPwdDialog()"
                type="h4"
                align="left"
                :title="maskedfuZhai"
                class="text"
              ></uni-title>
            </view>
          </view>
        </view>
        <view class="detail" v-for="(ZiChanData, index) in data?.Data" :key="index">
          <uni-section
            :title="
              showMask
                ? ZiChanData?.AccountTypeName
                : ZiChanData?.AccountTypeName + '(' + ZiChanData?.Total + ')'
            "
            type="line"
          >
            <uni-list>
              <uni-list
                :border="true"
                v-for="(Account, index) in ZiChanData?.Accounts"
                :key="index"
              >
                <!-- 显示圆形头像 -->
                <uni-list-chat
                  :avatar-circle="true"
                  :title="Account.AccountCard"
                  :avatar="Account.iconPath"
                  :note="Account.Note"
                  :time="showMask ? '*' : Account.Amount"
                  link="navigateTo"
                  :to="'./cardDetail?accountNo=' + Account.AccountNo"
                ></uni-list-chat>
              </uni-list>
            </uni-list>
          </uni-section>
        </view>
      </scroll-view>
    </view>
  </scroll-view>
  <!-- 密码 弹窗 -->
  <uni-popup
    ref="popup"
    type="center"
    borderRadius="20rpx"
    background-color="#fafafa"
    @close="popup?.close()"
  >
    <view class="popup-content popup">
      <view class="pheader">
        <text class="title">请输入密码</text>
        <text class="btn del" @tap="ComfirmPwd()">确 认</text>
      </view>
      <view class="content">
        <view class="Good">
          <view>
            <input class="uni-input" v-model="pwd" password placeholder="请输入查看密码" />
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<style lang="scss">
@import './styles/card.scss';
</style>
